<template>
  <div v-if="!isListVisible" @contextmenu.prevent="handleContextMenu">
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
      <!-- 基本查询 -->
      <el-tab-pane label="基本查询" name="first">
        <el-form :inline="true" :model="state.dataForm" label-width="85px">
          <div>
            <el-row style="margin-top: 10px;">
              <el-col :span="16">
                <el-form-item label="按姓名">
                  <el-input v-model="state.dataForm.name" type="text" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="按部门">
                  <el-input v-model="state.dataForm.department" type="text" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="按电话">
                  <el-input v-model="state.dataForm.tel" type="text" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="按手机">
                  <el-input v-model="state.dataForm.mobile" type="text" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="按微信">
                  <el-input v-model="state.dataForm.wechat" type="text" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="按公司名">
                  <el-input v-model="state.dataForm.company" type="text" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="按地址">
                  <el-input v-model="state.dataForm.address" type="text" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="按证件号码">
                  <el-input v-model="state.dataForm.idCard" type="text" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="按职务名">
                  <el-input v-model="state.dataForm.position" type="text" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item>
                  <el-checkbox v-model="state.dataForm.dataBox" style="margin-left:85px">人员数据筐</el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 基本查看 -->
            <el-button @click="baseQuery()" type="primary" style="margin-left:85px;margin-top:20px">{{ $t("query")
              }}</el-button>
          </div>
        </el-form>
      </el-tab-pane>
      <!-- 分类查询 -->
      <el-tab-pane label="分类查询" name="second">
        <el-form :inline="true" :model="state.dataForm" label-width="85px">
          <el-row style="margin-top: 10px;">
            <el-col :span="7">
              <el-form-item label="按展会名称">
                <el-select v-model="state.dataForm.exhId" placeholder="请选择" clearable>
                  <el-option v-for="role in roleList" :key="role.id" :label="role.exhName" :value="role.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
            </el-col>
            <el-col :span="7">
              <el-form-item label="按工作性质">
                <ren-select v-model="state.dataForm.unifyDept" dict-type="work_nature" placeholder="请选择"
                  clearable></ren-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="按参会类别">
                <ren-select v-model="state.dataForm.pjpType" dict-type="participant_category" placeholder="请选择"
                  clearable></ren-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
            </el-col>
            <el-col :span="7">
              <el-form-item label="按岗位职责">
                <ren-select v-model="state.dataForm.unifyRank" dict-type="responsibility" placeholder="请选择"
                  clearable></ren-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="按人员级别">
                <ren-select v-model="state.dataForm.level" dict-type="person_level" placeholder="请选择"></ren-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
            </el-col>
            <el-col :span="7">
              <el-form-item label="按项目查询">
                <el-select v-model="state.dataForm.epjName" placeholder="请选择" clearable>
                  <el-option v-for="role in epjNameList" :key="role.id" :label="role.name" :value="role.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="按人员类别">
                <ren-select v-model="state.dataForm.type" dict-type="person_category" placeholder="请选择"
                  clearable></ren-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
            </el-col>
            <el-col :span="7">
              <el-form-item label="按公司行业">
                <el-select v-model="state.dataForm.trade" placeholder="请选择" clearable>
                  <el-option v-for="role in tradeList" :key="role.id" :label="role.name" :value="role.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="按产品类别">
                <el-select v-model="state.dataForm.productType" placeholder="请选择" clearable>
                  <el-option v-for="role in productList" :key="role.id" :label="role.name" :value="role.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
            </el-col>
            <el-col :span="7">
              <el-form-item label="按数据来源">
                <el-input v-model="state.dataForm.resource" type="text" placeholder="请输入" clearable
                  style="width:213px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="按产品">
                <el-input v-model="state.dataForm.productIntroduce" type="text" placeholder="请输入" clearable
                  style="width:213px"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
            </el-col>
            <el-col :span="7">
              <el-form-item label="按备注">
                <el-input v-model="state.dataForm.remark" type="text" placeholder="请输入" clearable
                  style="width:213px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row style="margin-top:10px">
            <el-form-item>
              <div style="height: 0.5px; background-color:#e4e7ed; width: 1000px"></div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="7">
              <el-form-item label="标签一">
                <el-input v-model="state.dataForm.extField1" type="text" placeholder="请输入" clearable
                  style="width:213px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="标签二">
                <el-checkbox-group class="select" v-model="state.tskIdArr">
                  <el-checkbox v-for="item in state.tag2List" :key="item.id" :label="item.id" :value="item.id"
                    :title="item.label">
                    <span v-if="item.label.length > 9" :title="item.label">{{ item.label.substring(0, 9) }}...</span>
                    <span v-else>{{ item.label }}</span>
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item>
              <div style="height: 0.5px; background-color:#e4e7ed; width: 1000px"></div>
            </el-form-item>
          </el-row>
          <el-row :gutter="20" style="margin-top:20px">
            <el-col :span="5">
              <el-form-item label="按国家" label-width="85px">
                <ren-select v-model="state.dataForm.country" dict-type="country" placeholder="请选择"
                  clearable></ren-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="按省份" label-width="60px">
                <el-select v-model="state.dataForm.province" placeholder="请选择" @change="getcityList" clearable>
                  <el-option v-for="role in provincetList" :key="role.id" :label="role.name" :value="role.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="按城市" label-width="60px">
                <el-select v-model="state.dataForm.city" placeholder="请选择" clearable>
                  <el-option v-for="role in cityList" :key="role.id" :label="role.name" :value="role.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <el-checkbox v-model="state.dataForm.dataBox" style="margin-left:85px">人员数据筐</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item>
                <el-button @click="baseQuery()" type="primary" style="margin-left:85px;margin-top:10px">{{ $t("query")
                  }}</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
  <!-- 基本信息查询详情 -->
  <div v-if="isListVisible" style="margin: 0;background:#fff" class="unselectable" v-loading="state.dataForm.loading"
    @contextmenu.prevent="handleContextMenu">
    <Watermark fullscreen v-bind="waterModel"></Watermark>
    <el-form label-position="left" label-width="100px" :inline="true" :model="state.dataForm"
      @keyup.enter="state.getDataList()">
      <el-row>
        <el-col :span="6.5">
          <el-form-item label="个人收藏夹：">
            <el-select placeholder="请选择" v-model="state.dataForm.dfvId">
              <el-option v-for="role in collectList" :key="role.id" :label="role.dfvName" :value="role.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-form-item>
            <el-button @click="collectAdd()" :disabled="state.multiple">加入</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="collectDelete()" :disabled="state.multiple">移除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" style="margin-left:20px" @click="handleFavorite()">新建收藏夹</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="操作类型：">
            <ren-radio-group v-model="state.dataForm2.type" dict-type="Operation-type" style="width: 320px;">
            </ren-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0">
            <ren-select v-if="state.dataForm2.type == 0" v-model="state.dataForm2.field" dict-type="dict_class"
              placeholder="请选择"></ren-select>
            <ren-select v-if="state.dataForm2.type == 1" v-model="state.dataForm2.field" dict-type="category"
              placeholder="请选择"></ren-select>
            <ren-select v-if="state.dataForm2.type == 2" v-model="state.dataForm2.field" dict-type="dict_class"
              placeholder="请选择"></ren-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="为" label-width="30px" style="margin-left: 10px;">
            <ren-select v-if="state.dataForm2.field == 'person_level'" v-model="state.dataForm2.fieldValue"
              dict-type="person_level" placeholder="请选择"></ren-select>
            <ren-select v-else-if="state.dataForm2.field == 'responsibility'" v-model="state.dataForm2.fieldValue"
              dict-type="responsibility" placeholder="请选择"></ren-select>
            <ren-select v-else-if="state.dataForm2.field == 'work_nature'" v-model="state.dataForm2.fieldValue"
              dict-type="work_nature" placeholder="请选择"></ren-select>
            <ren-select v-else-if="state.dataForm2.field == 'tag2'" v-model="state.dataForm2.fieldValue"
              dict-type="tag2" placeholder="请选择"></ren-select>
            <el-input v-else-if="state.dataForm2.field == 'tag1'" v-model="state.dataForm2.fieldValue" type="text"
              placeholder="请输入" clearable></el-input>
            <ren-select v-else-if="state.dataForm2.field == 'contact_category'" v-model="state.dataForm2.fieldValue"
              dict-type="contact_category" placeholder="请选择"></ren-select>
            <el-input v-else-if="state.dataForm2.field == 'remark'" v-model="state.dataForm2.fieldValue"
              dict-type="remark" type="text" placeholder="请输入" clearable></el-input>
            <ren-select v-else v-model="state.dataForm2.fieldValue" placeholder="请选择"> </ren-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <div style="margin-left: 20px;">
            <el-button type="primary" @click="operationSubmit" :disabled="state.multiple">确定</el-button>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="1">
          <el-checkbox v-model="state.dataForm.checkAll" @change="chanckAll">全选</el-checkbox>
        </el-col>
        <el-col :span="2.5" v-if="state.hasPermission('crm:baseQuery:replacePersonBox')">
          <el-button @click="replacePersonnel()" :disabled="state.multiple">替换人员数据筐</el-button>
        </el-col>
        <el-col :span="2.5" v-if="state.hasPermission('crm:baseQuery:addPersonBox')">
          <el-button @click="joinPersonnel()" :disabled="state.multiple">加入人员数据筐</el-button>
        </el-col>
        <el-col :span="2.5" v-if="state.hasPermission('crm:baseQuery:removePersonBox')">
          <el-button @click="deletePersonnel()" :disabled="state.multiple">人员数据筐中移除</el-button>
        </el-col>
        <el-col :span="2.5" v-if="state.hasPermission('crm:baseQuery:addTask')">
          <el-button @click="addOrUpdateHandle()" :disabled="state.multiple">加入任务</el-button>
        </el-col>
        <el-col :span="2.5" v-if="state.hasPermission('crm:baseQuery:removeTask')">
          <el-button @click="RemoveOrUpdateHandle()" :disabled="state.multiple">移除任务</el-button>
        </el-col>
        <el-col :span="2.5" v-if="state.hasPermission('crm:baseQuery:addBlack')">
          <el-button @click="addBlacklist()" :disabled="state.multiple">加入黑名单</el-button>
        </el-col>
        <el-col :span="2.5">
          <el-button type="primary" @click="toggleListVisibility()">返回</el-button>
        </el-col>
        <el-col :span="2.5" v-if="state.hasPermission('crm:crmperson:delete')">
          <el-button type="danger" @click="state.deleteHandle()" :disabled="state.multiple">{{ $t("deleteBatch")
            }}</el-button>
        </el-col>
      </el-row>
      <el-table
        :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec', 'whiteSpace': 'nowrap' }"
        v-loading="state.dataListLoading" :data="state.dataList" border
        @selection-change="state.dataListSelectionChangeHandle" style="width: 100%;margin-top: 15px;">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column align="center" prop="name" label="姓名" min-width="50" type="primary" show-overflow-tooltip>
          <template v-slot="scope">
            <template v-if="scope.row.name">
              <el-link v-if="state.hasPermission('crm:baseQuery:detail')" :underline="false" type="primary"
                @click="userHandle(scope.row.id)">{{ scope.row.name }}</el-link>
              <el-link v-else>{{ scope.row.name }}</el-link>
            </template>
            <template v-else>
              <el-link type="primary" @click="userHandle(scope.row.id)" :underline="false">无</el-link>
            </template>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="company" label="公司" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="mobile" label="手机1" min-width="60" show-overflow-tooltip>
          <template v-slot="scope">
            {{ desensitizeMobile(scope.row.mobile) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="mobile2" label="手机2" min-width="60" show-overflow-tooltip>
          <template v-slot="scope">
            {{ desensitizeMobile2(scope.row.mobile2) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="tel" label="电话1" min-width="60" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="tel2" label="电话2" min-width="60" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="position" label="职务" min-width="40"
          show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="city" label="城市" min-width="40" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="lastContactTime" label="最后联络时间" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="updateTime" label="修改时间" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="realName" label="修改人" min-width="40"
          show-overflow-tooltip></el-table-column>
      </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[15, 25, 50, 100]" :page-size="state.limit" :total="state.total"
      layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle">
    </el-pagination>
    <!-- 弹窗加入任务 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"
      :psnIdList='state.dataForm.psnIdList' :checkAll='state.dataForm.checkAll'
      :condition='state.dataForm'></add-or-update>
    <!-- 弹窗移除任务 -->
    <RemoveTasks :key="remove" ref="RemoveOrUpdaeRef" @refreshDataList="state.getDataList"
      :psnIdList='state.dataForm.psnIdList' :checkAll='state.dataForm.checkAll' :condition='state.dataForm'>
    </RemoveTasks>
    <!-- 设置标签 -->
    <tag ref="exhibitionPowerRef" @refreshDataList="state.getDataList" :psnIdList='state.dataForm'
      :checkAll='state.dataForm.checkAll' :condition='state.dataForm'></tag>
    <!-- 新建收藏夹 -->
    <favorites ref="newFavorite" @refreshDataList="getCollectList"></favorites>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch, onMounted } from "vue";
import type { TabsPaneContext } from 'element-plus';
import { ElMessage } from "element-plus";
import baseService from "@/service/baseService";
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from 'vue-router'
import AddOrUpdate from "./join-tasks.vue";
import Watermark from '@/layout/Watermark.vue';
import tag from "./custom-tags.vue";
import favorites from "./favorites-list-add-or-update.vue";
import { useAppStore } from "@/store";
import RemoveTasks from "./remove-tasks.vue";
const store = useAppStore();

const waterModel = reactive({
  content: '',
  //layout: 'alternate',
  color: 'rgba(0,0,0,.05)',
  fontSize: 16,
  fontWeight: 400,
  zIndex: 9,
  rotate: -22,
  //gap: [100, 100],
  //offset: [50, 50]
})

const createWater = () => {
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let second = date.getSeconds();
  let monthStr = month < 10 ? '0' + month : month;
  let dayStr = day < 10 ? '0' + day : day;
  let hourStr = hour < 10 ? '0' + hour : hour;
  let minuteStr = minute < 10 ? '0' + minute : minute;
  let secondStr = second < 10 ? '0' + second : second;
  let time = year + '' + monthStr + '' + dayStr + '' + hourStr + '' + minuteStr + '' + secondStr;
  console.log("======", waterModel.content);
  waterModel.content = store.state.user.userId + time;
}

//监听路由发生变化
const route = useRoute();
watch(
  () => route.path,
  (newPath, oldPath) => {
    console.log('---------', route.query);
    console.log(window.location.href);
    let url = window.location.href;
    if (url.indexOf('/information-query') != -1 && !waterModel.content) {
      waterModel.content = '';
      createWater();
    } else {
      waterModel.content = '';
    }
  },
  { immediate: true } // 立即执行一次，以捕获初始路由
);




/**
 * 规范：
 * 1、方法要用多行注释，注明方法的作用
 * 2、方法名要有明确的动作含义，使用驼峰命名法
 * 3、方法内部的代码要有缩进，保持代码的整洁
 * 4、方法和方法之间要有空行，保持代码的整洁
 */
const { t } = useI18n();
const view = reactive({
  getDataListURL: '/crm/crmperson/queryPage',
  createdIsNeed: false,
  getDataListIsPage: true,
  deleteURL: "/crm/crmperson",
  deleteIsBatch: true,
  dataForm: {
    multiple: true,// 非多个禁用
    loading: false,
    state: 1,
    id: "",
    name: "",//人员姓名
    exhName: "",
    department: "",//部门
    idCard: "",//证件号码
    tel: "",//电话
    mobile: "",//手机
    wechat: '',//微信
    company: "",//公司
    position: "",
    address: "",//地址
    type: "",//人员类别
    exhId: "",//展会id
    pjpType: "",//	参会类别
    level: '',//人员级别
    unifyDept: "",//工作性质
    unifyRank: "",//岗位职责
    epjName: "",//展会项目名
    trade: "",//行业
    extField1: '',//标签一
    extField2: "",//标签二
    resource: "",//来源
    remark: "",//备注
    country: "",//国家
    province: "",//省
    city: "",//城市
    productType: "",//产品类别
    productIntroduce: "",//产品
    isVisible: true,
    dfvName: "",//收藏夹名
    dfvId: "",//收藏夹id
    psnIdListStr: "",
    field: "",
    fieldValue: "",
    checkAll: false as any,
    dataBox: "",//人员数据筐
    psnIdList: '' as any,
    selectedDfvId: "",
  },
  limit: 15,
  tskIdArr: [] as any[],
  tag2List: [] as any,
  dataForm2: {
    type: 0,
    field: "",
    fieldValue: "",
    psnIds: [] as any[],//收藏夹人员id
    sourceIdList: [] as any[],
    userIds: [] as any[],
    psnldListStr: [] as any[],
  },
  dataForm3: {
    id: "",
    name: "",//人员姓名
    exhName: "",
    department: "",//部门
    tel: "",//电话
    mobile: "",//手机
    wechat: '',//微信
    company: "",//公司
    position: "",
    address: "",//地址
    type: "",//人员类别
    exhId: "",//展会id
    pjpType: "",//	参会类别
    level: '',//人员级别
    unifyDept: "",//工作性质
    unifyRank: "",//岗位职责
    epjName: "",//展会项目名
    trade: "",//行业
    extField1: '',//标签一
    extField2: "",//标签二
    resource: "",//来源
    remark: "",//备注
    country: "",//国家
    province: "",//省
    city: "",//城市
    condition: "",
    state: 1,
    limit: 10,
    page: 1

  },
  dataForm4: {
  },


});

//初始化
onMounted(() => {
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let hour = date.getHours();
  let minute = date.getMinutes();
  let second = date.getSeconds();
  let monthStr = month < 10 ? '0' + month : month;
  let dayStr = day < 10 ? '0' + day : day;
  let hourStr = hour < 10 ? '0' + hour : hour;
  let minuteStr = minute < 10 ? '0' + minute : minute;
  let secondStr = second < 10 ? '0' + second : second;
  let time = year + '' + monthStr + '' + dayStr + '' + hourStr + '' + minuteStr + '' + secondStr;
  waterModel.content = store.state.user.userId + time;
});

const init = () => {
  //展会名称
  getRoleList()
  //收藏夹列表
  getCollectList()
  //公司行业
  getTradeList()
  //产品类别
  getproductList()
  //省份列表
  getprovincetList()
  //项目查询
  getepjNameList()
  //标签二
  getTag2();

};

/**
 * 禁止右键
 * @param event
 */
const handleContextMenu = (event: any) => {
  event.preventDefault();
  console.log('禁止右键')
};


/**
 * 基本查询
 */
const isListVisible = ref(false);
const baseQuery = () => {
  //清理上一次查询的数据
  state.dataList = [];
  state.page = 1;
  state.total = 0;
  isListVisible.value = !isListVisible.value;
  state.dataForm.extField2 = state.tskIdArr ? state.tskIdArr.join(",") : '';
  // 重新获取数据列表
  state.dataForm.checkAll = false
  state.getDataList();
  // state.dataForm.state = 1

};

// 点击全选按钮
const chanckAll = () => {
  state.multiple = !state.dataForm.checkAll
}

/**
 * 切换列表返回
 */
const toggleListVisibility = () => {
  Object.keys(state.dataForm).forEach(key => {
    if (typeof (state.dataForm as any)[key] === 'string') {
      (state.dataForm as any)[key] = '';
    }
    // 如果有其他数据类型，可根据需要添加处理逻辑
  });
  state.tskIdArr = [];
  state.dataForm.dataBox = "";
  //state.getDataList();
  isListVisible.value = !isListVisible.value; // 切换isListVisible.value的值
};

/**
 * 切换基本查询 分类查询
 */
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}


/**
 * 给手机1做处理
 */
const desensitizeMobile = (mobile: any) => {
  if (!mobile) return '';
  const prefix = mobile.slice(0, 3);
  const suffix = mobile.slice(-3);
  return `${prefix}*****${suffix}`;
};

/**
 * 给手机2做处理
 */
const desensitizeMobile2 = (mobile2: any) => {
  if (!mobile2) return '';
  const prefix = mobile2.slice(0, 3);
  const suffix = mobile2.slice(-3);
  return `${prefix}*****${suffix}`;
};


/**
 * 跳转人员查询详情页面
 */
const router = useRouter();
const userHandle = (row: any) => {
  router.push({
    path: "/expocube/personnel-information-details",
    query: {
      id: row,
    }
  });
};


//获取标签二
const getTag2 = () => {
  baseService.get("crm/crmperson/tag2List").then((res) => {
    state.tag2List = res.data;
  });
};

/**
 *收藏夹列表
 */
const collectList = ref<any[]>([]);
const getCollectList = () => {
  return baseService.get("/crm/crmdatafavorite/getByStufId", { orderField: 'id_desc' }).then((res) => {
    collectList.value = res.data;
    if (collectList.value.length > 0) {
      state.dataForm.dfvId = collectList.value[0].id;
    }
  });
};

/**
 *展馆列表
 */
const roleList = ref<any[]>([]);
const getRoleList = () => {
  return baseService.get("/crm/crmexhibition/queryList").then((res) => {
    roleList.value = res.data;
  });
};

/**
 *项目查询
 */
const epjNameList = ref<any[]>([]);
const getepjNameList = () => {
  return baseService.get("/crm/crmexhiproject/queryList").then((res) => {
    epjNameList.value = res.data;
  });
};

/**
 *公司行业
 */
const tradeList = ref<any[]>([]);
const getTradeList = () => {
  return baseService.get("/crm/crmtypeinfo/getListByType/1").then((res) => {
    tradeList.value = res.data;
  });
};

/**
 *产品类别
 */
const productList = ref<any[]>([]);
const getproductList = () => {
  return baseService.get("/crm/crmtypeinfo/getListByType/2").then((res) => {
    productList.value = res.data;
  });
};


/**
 *省份列表
 */
const provincetList = ref<any[]>([]);
const getprovincetList = () => {
  return baseService.get("/sys/region/getProvince").then((res) => {
    provincetList.value = res.data;
  });
};

/**
 *城市列表
 */
const cityList = ref<any[]>([]);
const getcityList = (provinceName: any) => {
  const province = provincetList.value.find(item => item.name === provinceName);
  return baseService.get(`/sys/region/getListByPid/${province.id}`).then((res) => {
    cityList.value = res.data;
  });
};


/**
 * 个人收藏加入
 */
const collectAdd = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm.loading = true;
  state.dataForm2.psnIds = ids;
  state.dataForm2.psnIds = state.dataForm2.psnIds.map((item: number) => Number(item)); // 转换psnIds中的字符串为数字
  return baseService.post("/crm/crmdatafavoritedetail/addFavorite",
    {
      dfvId: state.dataForm.dfvId,
      psnIds: state.dataForm2.psnIds,
      condition: state.dataForm,
      checkAll: state.dataForm.checkAll,
    }
  ).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      state.dataForm.checkAll = false;
      state.dataForm.loading = false;
      state.multiple = !state.dataForm.checkAll;
      return ElMessage.success({
        message: "已加入收藏夹" + res.data.insertCount + "条数据",
        type: "success",
        duration: 5000,
      });
    }
  });
};

/**
 * 个人收藏移除
 */
const collectDelete = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm.loading = true;
  state.dataForm2.psnIds = ids;
  state.dataForm2.psnIds = state.dataForm2.psnIds.map((item: number) => Number(item));
  return baseService.delete("/crm/crmdatafavoritedetail/deleteFavorite",
    {
      dfvId: state.dataForm.dfvId,
      psnIds: state.dataForm2.psnIds,
      condition: state.dataForm,
      checkAll: state.dataForm.checkAll,
    }
  ).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      state.dataForm.checkAll = false;
      state.dataForm.loading = false;
      state.multiple = !state.dataForm.checkAll;
      return ElMessage.success({
        message: "已从收藏夹移除" + res.data.insertCount + "条数据",
        type: "success",
        duration: 5000,
      });
    }
  });
};

/**
 * 新建收藏夹
 */
const newFavorite = ref();
const handleFavorite = () => {
  nextTick(() => {
    newFavorite.value.init();
  });
}


/**
 * 替换人员数据筐
 */
const replacePersonnel = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm.loading = true;
  state.dataForm2.sourceIdList = ids;
  state.dataForm2.sourceIdList = state.dataForm2.sourceIdList.map((item: number) => Number(item));
  return baseService.put(
    "/crm/crmuserdatabox/replaceBox",
    {
      checkAll: state.dataForm.checkAll,
      condition: state.dataForm,
      sourceIdList: state.dataForm2.sourceIdList
    }
  ).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      state.dataForm.checkAll = false;
      state.dataForm.loading = false;
      state.multiple = !state.dataForm.checkAll;
      console.log( state.multiple,9);
      return ElMessage.success({
        message: "已将所选的"+res.data.insertCount+"条替换到数据筐，数据筐共有"+res.data.afterCount+"条数据",
        type: "success",
        duration: 5000,
      });
    }
  });
}

/**
 * 加入人员数据筐
 */
const joinPersonnel = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm.loading = true;
  state.dataForm2.sourceIdList = ids;
  state.dataForm2.sourceIdList = state.dataForm2.sourceIdList.map((item: number) => Number(item));
  return baseService.post(
    "/crm/crmuserdatabox/addBox",
    {
      checkAll: state.dataForm.checkAll,
      condition: state.dataForm,
      sourceIdList: state.dataForm2.sourceIdList
    }
  ).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      state.dataForm.checkAll = false;
      state.dataForm.loading = false;
      state.multiple = !state.dataForm.checkAll;
      return ElMessage.success({
        message: "已加入数据筐"+res.data.insertCount+"条，数据筐共有"+res.data.afterCount+"条数据",
        type: "success",
        duration: 5000,
      });
    }
  });
}

/**
 * 人员数据筐移除
 */
const deletePersonnel = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm.loading = true;
  state.dataForm2.sourceIdList = ids;
  state.dataForm2.sourceIdList = state.dataForm2.sourceIdList.map((item: number) => Number(item));
  return baseService.delete(
    "/crm/crmuserdatabox/removeBox",
    {
      checkAll: state.dataForm.checkAll,
      condition: state.dataForm,
      sourceIdList: state.dataForm2.sourceIdList
    }
  ).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      state.dataForm.checkAll = false;
      state.dataForm.loading = false;
      state.multiple = !state.dataForm.checkAll;
      return ElMessage.success({
        message: "已从数据筐移除"+res.data.insertCount+"条，数据筐共有"+res.data.afterCount+"条数据",
        type: "success",
        duration: 5000,
      });
    }
  });
}

// /**
//  * 取消标签分类
//  */
// const hanleUnlabeling = () => {
//   let ids: string[] = [];
//   for (let i = 0; i < state.dataListSelections!.length; i++) {
//     ids.push(state.dataListSelections![i].id);
//   }
//   state.dataForm2.psnldListStr = ids;
//   state.dataForm2.psnldListStr = state.dataForm2.psnldListStr.map((item: number) => Number(item));
//   return baseService.get("/crm/crmbasetag/getSelectedList", { psnldListStr: state.dataForm2.psnldListStr.join() }).then((res: any) => {
//     if (res.code == 0) {
//       // 重新获取数据列表
//       state.getDataList();
//       state.dataForm.checkAll = false;
//       return ElMessage.success("取消标签分类成功");
//     }
//   });
// }

/**
 * 加入黑名单
 */
const addBlacklist = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm.loading = true;
  state.dataForm4 = ids;
  return baseService.put("/crm/crmperson/addBlacklist", state.dataForm4).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      state.dataForm.checkAll = false;
      state.dataForm.loading = false;
      state.multiple = !state.dataForm.checkAll;
      return ElMessage.success("加入黑名单成功");
    }
  });
}

/**
 * 操作类型后的确认
 */
const operationSubmit = () => {
  // //todo 获取选中的userIds
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  state.dataForm.loading = true;
  state.dataForm2.userIds = ids;
  state.dataForm2.userIds = state.dataForm2.userIds.map((item: number) => Number(item));
  return baseService.put(
    "/crm/crmperson/batchOperation",
    {
      type: Number(state.dataForm2.type),
      field: state.dataForm2.field,
      fieldValue: state.dataForm2.fieldValue,
      checkAll: state.dataForm.checkAll,
      userIds: state.dataForm2.userIds,
      condition: state.dataForm3
    }
  ).then((res) => {
    if (res.code == 0) {
      // 重新获取数据列表
      state.getDataList();
      state.dataForm.checkAll = false;
      state.dataForm.loading = false;
      state.multiple = !state.dataForm.checkAll;
      return ElMessage.success("操作成功");
    }
  });
}

// //设置标签分类弹窗
// const exhibitionPowerRef = ref();
// const handleAuthority = (id?: number) => {
//   nextTick(() => {
//     let ids: string[] = [];
//     for (let i = 0; i < state.dataListSelections!.length; i++) {
//       ids.push(state.dataListSelections![i].id);
//     }
//     state.dataForm2.sourceIdList = ids;
//     state.dataForm2.sourceIdList = state.dataForm2.sourceIdList.map((item: number) => Number(item));
//     console.log(state.dataForm2);
//     exhibitionPowerRef.value.init(id, state.dataForm2.sourceIdList);
//   });
// }


//加入任务弹窗户
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;

  nextTick(() => {
    let ids: string[] = [];
    for (let i = 0; i < state.dataListSelections!.length; i++) {
      ids.push(state.dataListSelections![i].id);
    }
    state.multiple=true;
    state.dataForm.psnIdList = ids;
    state.dataForm.psnIdList = state.dataForm.psnIdList.join(',');
    addOrUpdateRef.value.init(id, state.dataForm, state.dataForm.checkAll, state.dataForm3,state.multiple);
  });
};

//移除任务弹窗
const remove = ref(0);
const RemoveOrUpdaeRef = ref();
const RemoveOrUpdateHandle = (id?: number) => {
  remove.value++;

  nextTick(() => {
    let ids: string[] = [];
    for (let i = 0; i < state.dataListSelections!.length; i++) {
      ids.push(state.dataListSelections![i].id);
    }
    state.multiple=true;
    state.dataForm.psnIdList = ids;
    state.dataForm.psnIdList = state.dataForm.psnIdList.join(',');
    RemoveOrUpdaeRef.value.init(id, state.dataForm, state.dataForm.checkAll, state.dataForm3,state.multiple);
  });
};

const state = reactive({ ...useView(view), ...toRefs(view) });

init();

</script>
<style lang="scss" scoped>
.el-tab-pane {
  margin-left: 10px;
}

.el-form-item::v-deep {
  .el-checkbox-group {
    .el-checkbox {
      width: 140px;
    }
  }
}

.el-button {
  margin-right: 10px;
}

.el-table-column {
  white-space: nowrap;
}

.unselectable {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard syntax */
}

.el-input {
  width: 213px;
}

::v-deep .el-table .cell {
  white-space: nowrap;
  font-size: 13px;
  height: 18px;
  line-height: 18px;
}
</style>
